import { Tree, Icon } from 'antd';
import { useState, useEffect } from 'react';
import { queryAllDept } from '@/services/okr'

const { TreeNode } = Tree;
const TreeSelectItem = (props, ref) => {
  const { updatedepartmentId, updateId = () => {} } = props;
  const [value, setValue] = useState();
  const [treeList, setTreeList] = useState([])

  useEffect(()=>{
    initData()
  }, [])
  const initData = async () => {
    const res = await queryAllDept();
    const list = res?.data?.deptList || [];
    const treeList = renderTree(list)
    setTreeList(treeList)
  }
  const onChange = (val) => {
    console.log(val,'000000')
    setValue(val);
    updatedepartmentId(val)
    updateId(val)
  };
  const renderTree = (list) => {
    const newList = list.map((item)=>{
      let childrenList = []
      if(item.children.length > 0){
        childrenList = renderTree(item.children)
      } 
      return { 
        value: item.id,
        key: item.id,
        title: item.departmentName,
        children: childrenList
      }
    })
    return newList;
  }
  const renderTreeItem = (list) => {
    list.map((item, index)=>{
      if (item.children) {
        return (
          <TreeNode>
            {renderTreeItem(item.children)}
          </TreeNode>
        );
      } 
      return <TreeNode value={item.value} title={item.text}></TreeNode>
    })
  }
  return (
    <>
      <Tree
        // showSearch
        style={{ width: '100%' }}
        value={value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="查看其他部门/个人okr"
        allowClear
        // treeDefaultExpandAll={true}
        onSelect={onChange}
        treeData={treeList}
      >
        {/* <TreeNode value="parent 1" title="parent 1">
          <TreeNode value="parent 1-0" title="parent 1-0">
            <TreeNode value="leaf1" title="leaf1" />
            <TreeNode value="leaf2" title="leaf2" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1">
            <TreeNode
              value="leaf3"
              title={<b style={{ color: '#08c' }}>leaf3</b>}
            />
          </TreeNode> */}
          {/* {renderTreeItem(treeList)} */}
        {/* </TreeNode> */}
      </Tree>
    </>
  );
};
export default TreeSelectItem;
